<template>
	<div id="public-page">
		<div class="header">
			<h2>易迅</h2>
			<div class="user-info">
				<span><span class="username">{{own.name}}</span>你好</span>
				<img class="user-img" src="../../static/img/userImg.png">
			</div>
		</div>
		<div class="container">
			<div class="con-left">
				<ul>
					<li v-for="(item,index) in listTitle">
						<img :src="item.icon">
						<router-link :to="item.router" class="block">{{ item.name }}</router-link>
					</li>

				</ul>
				<div class="exit" @click="out">
					<img src="../../static/img/arrow.png">退出登入
				</div>
			</div>
			<div class="con-right">
				<div class="con-right-main">
					<router-view 
						 :items="items"
						 @add="addItem"
						 @remove="removeItem"
						 @change="changeItem"
						 @toChangeOwn="changeOwn"
					></router-view>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { mapActions, mapState } from 'vuex';

export default {
	name: "AddressList",
	data: function() {
		return {
			listTitle: [
				{ name:"通讯录",bol:true,router:"/address",icon:"../../static/img/notebook.png" },
				{ name:"添加信息",bol:false,router:"/address/addcon",icon:"../../static/img/plus.png" },
				{ name:"个人中心",bol:false,router:"/address/own",icon:"../../static/img/user.png" }
			]
		}
	},
	beforeCreate() {
		this.$store.dispatch('userInit');
	},
	computed: mapState({
		own: state => state.contacts.own,
		items: state => state.contacts.items
	}),
	methods: {
		...mapActions([
			'signOut', 
			'userAdd',
			'userRemove',
			'userChange',
			'ownChange'
		]),
		addItem(item) {
			this.userAdd(item);
		},
		removeItem(id) {
			this.userRemove(id);
		},
		changeItem(obj) {
			this.userChange(obj);
		},
		changeOwn(obj) {
			this.ownChange(obj);
		},
		out() {
			this.signOut();
			this.$router.replace('/home/login');
		}
	}
}
</script>

<style>
#public-page .header {width: 100%; height: 65px;}
#public-page h2 {margin-left: 15px; float: left;height: 60px;line-height: 60px; font-size: 34px;font-weight: normal;}
#public-page .user-info {float: right;height: 65px;line-height: 65px;}
#public-page .user-info span {font-size: 16px;}
#public-page .username {margin-right: 5px;}
#public-page .user-img {width: 45px;float:right;margin: 10px;}

#public-page .container {width: 100%; min-width: 820px; height: 600px; background: #eee;}
#public-page .con-left {width: 20%; min-width: 170px; float:left; height: 100%; border-right: 1px solid #fff;position: relative; box-sizing: border-box;}
#public-page .con-left ul {width: 100%;}
#public-page .con-left li {height: 50px; line-height: 50px; cursor: pointer; border-bottom: 1px solid #fff;position: relative;}
#public-page .con-left .block {padding-left: 50px;display: block;font-size: 16px;color: #333;}
#public-page .con-left img{width: 25px;position: absolute; margin: 10px;}
#public-page .exit {position: absolute;right: 5px;bottom: 5px; cursor: pointer;}
#public-page .exit>img {margin: 0; left: -25px;top: -1px;}
#public-page .exit>a {color: #333;}

#public-page .con-right {width: 79%; height: 100%; float: left;}
#public-page .con-right-main {width: 70%; height: 100%; margin: 0 auto;}
#public-page .router-link-exact-active {background: #3385FF;}
</style>